<template>
    <div class="JGLogger-default-template">
        <h4 class="header">日志信息列表</h4>
        <div class="content">
            <div class="filter-section">
                <el-button type="primary" class="add-JGLogger btn fl" plain size="small" @click="JGLoggerCreate">新增日志
                </el-button>
                <el-button type="primary" class="search btn fr" plain size="mini">查询</el-button>
                <el-select v-model="selectValue" placeholder="请选择" class="select fr" size="mini" filterable clearable>
                    <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input class="search-input fr"
                          placeholder="请输入关键字"
                          prefix-icon="el-icon-search"
                          v-model="searchValue"
                          size="mini" clearable>
                </el-input>
            </div>
            <JGLoggerTableList class="jg-logger-table-list" ref="JGLoggerTableList"></JGLoggerTableList>
        </div>
        <Pagination class="JGLogger-pagination" ref="JGLoggerPagination" :currentPage="JGLoggerCurrentPage"
                    :pageSize="JGLoggerPageSize" :pageSizes="JGLoggerPageSizes" :total="JGLoggerTableTotal"
                    @sizeChangeEvent="JGLoggerSizeChange" @currentChangeEvent="JGLoggerCurrentChange"></Pagination>
    </div>
</template>

<script>
    import JGLoggerTableList from "@/components/JGLoggerTableList.component"
    import Pagination from "@/components/Pagination.component"

    export default {
        name: "JGLoggerDefault",
        components: {Pagination, JGLoggerTableList},
        data() {
            return {
                searchValue: '',
                selectValue: '',
                selectOptions: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                JGLoggerCurrentPage: 1,
                JGLoggerPageSize: 100,
                JGLoggerPageSizes: [100, 200, 300, 400],
                JGLoggerTableTotal: 400
            }
        },
        methods: {
            JGLoggerSizeChange(val) {
                val && (this.JGLoggerPageSize = val);
                console.log(`每页 ${val} 条`);
            },
            JGLoggerCurrentChange(val) {
                val && (this.JGLoggerCurrentPage = val);
                console.log(`当前页: ${val}`);
            },
            /**
             * 机构日志创建
             */
            JGLoggerCreate() {
                this.$parent.curPath = 'create';
            }
        }
    }
</script>

<style lang="scss">
    .JGLogger-default-template {
        width: 100%;
        height: 100%;
        background-color: #fff;
        .header {
            text-align: center;
        }
        .content {
            .filter-section {
                border-bottom: 1px solid #ddd;
                padding-bottom: 35px;
                margin: 0 10px;
                padding-left: 5px;
                padding-right: 5px;
                .select {
                    width: 125px;
                    margin-left: 10px;
                }
                .search-input {
                    width: 150px;
                }
            }
            .JGLogger-table-list {
                margin: 0 10px;
                padding: 0 5px;
            }
        }
        .JGLogger-pagination {
            margin-top: 10px;
        }
    }
</style>